<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="服务区" prop="status">
               <el-tree-select
                 v-model="queryParams.serviceId"
                 :data="deptTreeData"
                 :props="{ value: 'id', label: 'label', children: 'children' }"
                 :render-after-expand="false"
                 show-checkbox
                 value-key="id"
                 check-strictly
                 placeholder="请选择服务区"
                 class="with-300"
                 clearable
             />
            </el-form-item>
            <el-form-item label="店铺名称" prop="shopName">
               <el-input
                   v-model="queryParams.shopName"
                   placeholder="请输入店铺名称"
                   clearable
                   class="with-240"
               />
             </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
       <!-- 表格数据 -->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="店铺名称" prop="shopName"/>
            <el-table-column label="店长名称" prop="shopManagerName"/>
            <el-table-column label="联系方式" prop="phonenumber"/>
            <el-table-column label="所属服务区" prop="serviceName"/>
            <el-table-column label="所属行政区" prop="provinceName"/>
            <el-table-column label="地址" prop="address"/>
            <el-table-column label="营业时间" prop="businessHours"/>
            <el-table-column label="门店人数" prop="employeeNum"/>
            <el-table-column label="门店面积" prop="shopArea"/>
            <el-table-column label="创建时间" prop="createTime"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button link type="primary" icon="Search" @click="lookDetails(scope.row)" v-hasPermi="['remoteInspection:pos:view']">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getShopData"
        />
        <!-- 查看 -->
        <el-dialog title="视频巡检" v-model="detailsDialog" width="1100px" append-to-body>
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="video-area">
                        <div class="video">待连接设备</div>
                        <div class="search-item">
                            <div>
                                <div>
                                    <span>星期三 2024-09-21</span>
                                    <span>
                                        <el-time-picker v-model="timeValue" placeholder="请选择时间" style="width: 120px; cursor: pointer;margin-left: 10px;"/>
                                    </span>
                                </div>
                                <div class="pageBtn"> 2/9 </div>
                            </div>
                            <div>
                                <ul class="ul-time">
                                    <li v-for="(item,i) in timeList" :key="item.id" :class="timeNum == i ? 'active' : ''"
                                     @click="changTime(i)">{{ item.label }}</li>
                                </ul>
                                <div class="download-btn"><el-button :icon="Download" @click="downloadVideo" v-hasPermi="['remoteInspection:dashBoard:download']">录像下载</el-button></div>
                            </div>
       
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="event-type">
                        <ul class="ul-tabs">
                            <li v-for="(item,i) in tabsList" :key="item.id" :class="tabsNum == i ? 'active' : ''"
                             @click="changTabs(i)">{{ item.label }}</li>
                        </ul>
                        <div class="type-list">
                            <div>日期：2024-09-21</div>
                            <div><el-input placeholder="Please Input" :suffix-icon="Search" /></div>
                            <ul>
                                <li>暂无数据</li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { Download } from '@element-plus/icons-vue'
import { getShopList } from "@/api/system/shop";
import useUserStore from '@/store/modules/user'

const loading = ref(false);
const tabsNum = ref(0);
const timeNum = ref(0);
const timeValue = ref();
const total = ref(0);
const detailsDialog = ref(false);
const tabsList = ref([
    {
        id: 0,
        label: "pos小票"
    },
    {
        id: 1,
        label: "票据"
    },
    {
        id: 2,
        label: "仓储"
    }
])
const timeList = ref([
    {
        id: 0,
        label: "5分钟"
    },
    {
        id: 1,
        label: "1小时"
    },
    {
        id: 2,
        label: "24小时"
    }
])
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    shopName:"",
    serviceId:""
})

const tableData = ref([])

onMounted(()=>{
    getShopData()
})

//服务区下拉数据
const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})

//查询店铺列表
const getShopData = () =>{
  loading.value = true;
  getShopList(queryParams).then(response => {
    if (response.code === 200) {
      tableData.value = response?.rows || [];
      total.value = response?.total || 0;
    }
    loading.value = false;
  }).catch((err) => (loading.value = false));
}
// 搜索
const handleQuery = () =>{
    queryParams.pageNum = 1;
    getShopData()
}
// 重置
const resetQuery= () =>{
    Object.assign(queryParams, {
        pageNum: 1,
        pageSize: 10,
        shopName:"",
        serviceId:""
    })
    getShopData();
}

//多选框选中数据
const handleSelectionChange = (selection) =>{

}

//查看
const lookDetails = (row) =>{
    detailsDialog.value = true
}
const changTabs = (index) =>{
    tabsNum.value = index
}
const changTime = (index) =>{
    timeNum.value = index
    ElMessage({
        message: '待接入设备',
        type: 'success',
  })
}

const downloadVideo = () =>{
    ElMessage({
        message: '待接入设备',
        type: 'success',
  })
}
</script>

<style lang="scss" scoped>
.video-area{
    position: relative;
    .video{
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .video-control{
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        span{
            padding: 5px 10px;
            border-radius: 5px;
            background-color: rgba($color: #000000, $alpha: 0.8);
            color: #fff;
            margin-right: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        span:last-child{
            margin-right: 0;
        }
        span.time{
            i{
                font-style: normal;
            }
            i:last-child{
                margin-left: 50px;
                color: orange;
            }
        }
    }
    .search-item{
        display: flex;
        justify-content: space-between;
        >div{
            flex: 1;
            display: flex;
            justify-content: space-around;
            .pageBtn{
                padding:5px 15px;
                background-color: #eee;
                border-radius: 3px;
                display: flex;
                align-items: center;
            }
            ul.ul-time{
                display: flex;
                background-color: #eee;
                border-radius: 3px;
                li{
                    text-align: center;
                    padding:5px 8px;
                    cursor: pointer;
                }
                li:first-child{
                    border-top-left-radius: 3px;
                    border-bottom-left-radius: 3px;
                }
                li:last-child{
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }
                li.active{
                    background-color: darkorange;
                    color: #fff;
                }
            }
        }
    }
}
:deep .el-form{
    .el-form-item{
        .el-form-item__label{
            justify-content: flex-start;
        }
    }
}
.event-type{
    border: 1px solid #eee;
    padding: 10px;
    height: 100%;
    ul.ul-tabs{
        display: flex;
        background-color: #eee;
        li{
            flex: 1;
            text-align: center;
            padding:5px 0;
            cursor: pointer;
        }
        li.active{
            background-color: darkorange;
            color: #fff;
        }
    }
    .type-list{
        margin-top: 15px;
        border: 1px solid #eee;
        height: 90%;
        >div{
            border-bottom: 1px solid #eee;
            padding: 10px;
        }
        ul{
            li{
                padding: 10px;
                text-align: center;
            }
        }
    }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>